package myJs

import myJs.api.Api
import myJs.cps.{Style}
import myJs.myPkg.{NavigateOptions, ReactRouterDOM}
import myJs.tool.Tool
import org.scalajs.dom.window.localStorage
import slinky.core.FunctionalComponent
import slinky.core.annotations.react
import slinky.web.html._
import typings.csstype.csstypeStrings

import scala.scalajs.js

/**
 * Created by yz on 22/4/2022
 */
@react object HeaderCp {

  type Props = Unit

  val component = FunctionalComponent[Props] { props =>

    val navigate = ReactRouterDOM.useNavigate()

    val account = Tool.getAccount

    object FTool {

      def logout = () => {
        localStorage.clear()
        navigate("/", options = NavigateOptions(state = js.Dictionary("message" -> "退出登录成功!",
          "errorClass" -> "text-success")))
      }

    }

    div(className := "page-header navbar navbar-fixed-top",
      div(style := Style(), className := "page-header-inner",
        div(className := "page-logo",
          div(className := "menu-toggler sidebar-toggler hide"
          ),
          a(className := "menu-toggler responsive-toggler", data - "toggel" := "collapse", data - "target" := ".navbar-collapse")
        ),
        div(className := "top-menu",
          ul(className := "nav navbar-nav pull-right",
            li(className := "dropdown dropdown-user",
              a(className := "dropdown-toggle", data - "toggle" := "dropdown", data - "hover" := "dropdown",
                data - "close-others" := "true",
                span(className := "username username-hide-on-mobile",
                  account
                ), " ",
                i(className := "fa fa-angle-down")
              ),
              ul(className := "dropdown-menu",
                li(
                  a(onClick := FTool.logout,
                    i(className := "fa fa-user"),
                    " 退出登录"
                  )
                )
              )
            )
          )
        )
      )
    )
  }

}
